<template>
	<div class="page-container">
		<h1>速度单位转换</h1>
		<el-form>
			<el-row>
				<el-col :md="20" :sm="24">
					<el-form-item label="原始单位">
						<el-select v-model="fromUnit" placeholder="请选择原始单位" @change="convert">
							<el-option label="米(m)" value="m"></el-option>
							<el-option label="千米(km)" value="km"></el-option>
							<el-option label="分米(dm)" value="dm"></el-option>
							<el-option label="厘米(cm)" value="cm"></el-option>
							<el-option label="毫米(mm)" value="mm"></el-option>
							<el-option label="微米(μm)" value="μm"></el-option>
							<el-option label="纳米(nm)" value="nm"></el-option>
							<el-option label="英尺(ft)" value="ft"></el-option>
							<el-option label="英寸(in)" value="in"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="数值">
						<el-input v-model.number="val" placeholder="请输入数值" @input="convert"></el-input>
					</el-form-item>
					<el-form-item label="目标单位">
						<el-select v-model="toUnit" placeholder="请选择目标单位" @change="convert">
							<el-option label="米(m)" value="m"></el-option>
							<el-option label="千米(km)" value="km"></el-option>
							<el-option label="分米(dm)" value="dm"></el-option>
							<el-option label="厘米(cm)" value="cm"></el-option>
							<el-option label="毫米(mm)" value="mm"></el-option>
							<el-option label="微米(μm)" value="μm"></el-option>
							<el-option label="纳米(nm)" value="nm"></el-option>
							<el-option label="英尺(ft)" value="ft"></el-option>
							<el-option label="英寸(in)" value="in"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="转换结果">
						<el-input disabled v-model="result" placeholder="转换结果"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-form-item style="text-align: right;">
				<el-button @click="clear">重置</el-button>
				<el-button @click="$router.back()">返回</el-button>
			</el-form-item>
		</el-form>
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				fromUnit: '',
				toUnit: '',
				val: null,
				result: null,
				conversionTable: {
					m: {
						km: 0.001,
						dm: 10,
						cm: 100,
						mm: 1000,
						μm: 1000000,
						nm: 1000000000,
						ft: 3.2808,
						in: 39.3701
					},
					km: {
						m: 1000,
						dm: 10000,
						cm: 100000,
						mm: 1000000,
						μm: 1000000000,
						nm: 1000000000000,
						ft: 3280.84,
						in: 39370.1
					},
					dm: {
						m: 0.1,
						km: 0.0001,
						cm: 10,
						mm: 100,
						μm: 100000,
						nm: 100000000,
						ft: 0.328084,
						in: 3.93701
					},
					cm: {
						m: 0.01,
						km: 0.00001,
						dm: 0.1,
						mm: 10,
						μm: 10000,
						nm: 10000000,
						ft: 0.0328084,
						in: 0.393701
					},
					mm: {
						m: 0.001,
						km: 0.000001,
						dm: 0.01,
						cm: 0.1,
						μm: 1000,
						nm: 1000000,
						ft: 0.00328084,
						in: 0.0393701
					},
					μm: {
						m: 0.000001,
						km: 0.000000001,
						dm: 0.00001,
						cm: 0.0001,
						mm: 0.001,
						nm: 1000,
						ft: 0.00000328084,
						in: 0.0000393701
					},
					nm: {
						m: 0.000000001,
						km: 0.000000000001,
						dm: 0.00000001,
						cm: 0.0000001,
						mm: 0.000001,
						μm: 0.001,
						ft: 0.00000000328084,
						in: 0.0000000393701
					},
					ft: {
						m: 0.3048,
						km: 0.0003048,
						dm: 3.048,
						cm: 30.48,
						mm: 304.8,
						μm: 304800,
						nm: 304800000,
						in: 12
					},
					in: {
						m: 0.0254,
						km: 0.0000254,
						dm: 0.254,
						cm: 2.54,
						mm: 25.4,
						μm: 25400,
						nm: 25400000,
						ft: 0.0833333
					}
				}
			}
		},
		methods: {
			convert() {
				if (!this.fromUnit || !this.toUnit || !this.val) {
					return;
				}
				const conversionFactor = this.conversionTable[this.fromUnit][this.toUnit];
				this.result = this.val * conversionFactor;
			},
			clear() {
				this.fromUnit = '';
				this.toUnit = '';
				this.val = null;
				this.result = null;
			}
		}
	}
</script>
